<template>
	<view class="container">
		<view class="head">
			<view class="store-head">
				<view class="store-head-item" v-for="(item,index) in items" :key="index"
					:class="current == index? 'f-active-color':''" @tap="onClickItem(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 30rpx;">
			<!-- 全部商品 -->
			<template v-if="current == 0">
				<CommodityList :dataList="goodsList" v-if="goodsList && goodsList.length>=1"></CommodityList>
				<noData :data='tagText' v-else></noData>
			</template>
			<!-- 促销商品 -->
			<template v-else-if="current == 1">
				<CommodityList :dataList="discountList" v-if="discountList && discountList.length>=1"></CommodityList>
				<noData :data='tagText' v-else></noData>
			</template>
			<!--热销商品 -->
			<template v-else-if="current == 2">
				<CommodityList :dataList="hotList" v-if="hotList && hotList.length>=1"></CommodityList>
				<noData :data='tagText' v-else></noData>
			</template>
			<!-- 推荐商品 -->
			<template v-else-if="current == 3">
				<CommodityList :dataList="recommendList" v-if="recommendList && recommendList.length>=1"></CommodityList>
				<noData :data='tagText' v-else></noData>
			</template>
		</view>
		<view class="add-goods">
			<view class="add-goods-item" @tap="goAddGoods">新增商品</view>
		</view>
	</view>
</template>

<script>
	import CommodityList from '../../components/common/CommodityList.vue'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import $http from "../../common/api/request.js"
	import {mapState} from 'vuex'
	import noData from '../../components/my_shop_store/noData.vue'
	export default {
		data() {
			return {
				current:0,
				goodsList:[],
				discountList:[],
				hotList:[],
				recommendList:[],
				items:[
					{name:'全部',type:'allgoods'},
					{name:'促销商品',type:'discountgoods'},
					{name:'热销商品',type:'hotgoods'},
					{name:'推荐商品',type:'recommendgoods'}
				],
				tagText:'还没有商品哦，快去添加您的商品吧'
			}
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		components:{
			CommodityList,
			noData
		},
		onLoad() {
			this.getData()
		},
		methods: {
			onClickItem(item,index){
				this.current = index
				if(index){
					if(index == 0){
						this.getData()
					}else{
						$http.request({
							url: '/selectGoodsItem',
							method: 'POST',
							header: {
								token: true
							},
							data:{
								type:item.type
							}
						}).then((res) => {
							if(index == 1){
								this.discountList = res
							}else if(index == 2){
								this.hotList = res
							}else if(index == 3){
								this.recommendList = res
							}
						}).catch(() => {
							uni.showToast({
								title: "请求失败了哦",
								icon: "error"
							})
						})
					}
				}
				
			},
			getData(){
				$http.request({
					url: '/selectGoods',
					method: 'POST',
					header: {
						token: true
					},
				}).then((res) => {
					this.goodsList =res
				}).catch(() => {
					uni.showToast({
						title: "请求失败了哦",
						icon: "error"
					})
				})
			},
			goAddGoods(){
				uni.navigateTo({
					url:'/pages/add-store/add-store'
				})
			}
		}
	}
</script>

<style scoped>
.text{
	height: 500rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.add-goods{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80rpx;
	background-color: #49bdfb;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.head{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.store-head{
	width: 750rpx;
	height: 50rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: aliceblue;
}

</style>
